<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<div id="app">
			<el-row style="margin-top: auto;">
				<el-col :span="20" :offset="2">
					 <el-button type="success"  @click="opendialogVisible()" icon="el-icon-star-off" >添加</el-button>
				</el-col>
			</el-row>
						
			<el-row style="margin-top: auto;">
				<el-col :span="20" :offset="2">
					<template>
						<el-table :data="students" style="width: 100%" :header-cell-style="{'text-align':'center'}">
							<el-table-column type="selection" width="55"> </el-table-column>
							<el-table-column type="index" label="序号" width="60"></el-table-column>
							<el-table-column prop="name" label="名字" width="100" align="center"></el-table-column>
							<el-table-column label="年龄" width="100" align="right">
								<template slot-scope="scope">
									{{scope.row.age}} 年
								</template>
							</el-table-column>
							<el-table-column prop="degree" label="别名" width="180" align="center">
								<template slot-scope="scope">
								      <span v-if="scope.row.sex== 0"><el-button  style="color: #DD6161;" type="primary" icon="el-icon-loading" round>小 学</el-button></span>
								      <span v-else-if="scope.row.degree== 1"><el-button style="color: #B3E19D;" type="warning" icon="el-icon-loading" round>中  学</el-button></span>
								      <span v-else-if="scope.row.degree== 2"style="color: #E6A23C;"><el-button type="danger" icon="el-icon-loading" round>大  学</el-button></span>
								      <span v-else-if="scope.row.degree== 3"style="color: #409EFF;"><el-button type="warning" icon="el-icon-loading" round>研究生</el-button></span>
								      <span v-else="scope.row.degree== 4" style="color: #00FF00;"><el-button type="primary" icon="el-icon-loading" round>博士生</el-button></span>
								</template>
							</el-table-column>
							
							<el-table-column label="操作">
							  <template slot-scope="scope">
							    <el-button size="medium "
							       @click="opendialogVisible(scope.$index,scope.row)" type="success" round>编辑</el-button>
							  </template>
							</el-table-column>
						</el-table>
					</template>
				</el-col>
			</el-row>
			
			<!--添加模态框-->
			<el-dialog
			  title="添加/修改信息"
			  :visible.sync="dialogVisible"
			  width="30%"
			 >
			 
			 <el-form :model="addstudent" :rules="rules" ref="addForm" label-width="80px">
			   <el-form-item label="名字" prop="name" >
			     <el-input v-model="addstudent.name" autocomplete="off"></el-input>
			   </el-form-item>
			   <el-form-item label="年龄" prop="age" >
			     <el-input v-model="addstudent.age" autocomplete="off"></el-input>
			   </el-form-item>
			   <el-form-item label="性别" >
			     	<el-radio-group v-model="addstudent.sex" size="medium">
			 				      <el-radio border :label="1">男</el-radio>
			 				      <el-radio border :label="2">女</el-radio>
			 		</el-radio-group>
			   </el-form-item>
			   <el-form-item label="学历" >
			     <el-select v-model="addstudent.degree" clearable placeholder="请选择">
			 				    <el-option
			 				      v-for="degree in degrees"
			 				      :key="degree.value"
			 				      :label="degree.name"
			 				      :value="degree.id">
			 				    </el-option>
			 				  </el-select>
			   </el-form-item>
			 </el-form>
			  
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="savestudent">确 定</el-button>
			  </span>
			</el-dialog>			
		</div>

		<link rel="stylesheet" type="text/css" href="lib/theme-chalk/index.css" />

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/index.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var students = [{
				id:1,
				name:"段誉",
				age:19,
				sex:1,
				degree:1
			},{
				id:2,
				name:"王语嫣",
				age:16,
				sex:2,
				degree:4
			},{
				id:3,
				name:"慕容复",
				age:30,
				sex:1,
				degree:3
			},{
				id:4,
				name:"鸠摩智",
				age:40,
				sex:1,
				degree:3
			}]
			
			var app = new Vue({
				el: "#app",
				data: {
					students: students,
					dialogVisible:false,
					addstudent:{
						name:null,
						age:null,
						sex:1,
						degree:null
					},
					index:null,
					//学历显示
					degrees:[{
						id:0,
						name:"小学"
					},{
						id:1,
						name:"中学"
					},{
						id:2,
						name:"大学"
					},{
						id:3,
						name:"研究生"
					},{
						id:4,
						name:"博士生"
					}],
					//表单验证
					rules: {
					  name: [
					    { required: true, message: '请输入长度在 2 到 5 个字符的名字', trigger: 'blur' },
						{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
					  ],
					  age: [
					    { required: true, message: '年龄不能为空', trigger: 'blur' }
					  ],
					  
					}
				},
				methods:{
					//显示添加信息
					opendialogVisible(){
						this.dialogVisible = true
					},
					//修改数据回显
					opendialogVisible(index,row){
						this.dialogVisible = true
						this.addstudent = Object.assign({},row)
						this.index = index
						console.debug(this.index)
					},
					//添加信息
					savestudent(){
						this.$refs["addForm"].validate((valid) => {
					     if (valid) {
					     	console.debug(this.index)
					     	if(this.index != null){
										        this.students.splice(this.index,1,this.addstudent)
										     	//添加成功提示信息
										     	this.$message({
										            type: 'success',
										            message: '修改成功!'
										        });
										        //关闭模态框
										        this.dialogVisible =false
										        this.index = null
					     	}else{
										        this.students.push(this.copyObj(this.addstudent))
										     	//添加成功提示信息
										     	this.$message({
										            type: 'success',
										            message: '添加成功!'
										        });
										        //关闭模态框
										        this.dialogVisible =false
					       }
					       
					     } else {
					       return false;
					     }
					   });
						
					},
					//复制对象操作
					copyObj(obj){
						var newObj = {}
						for(var p in obj){
							newObj[p]=obj[p]
						}
						return newObj;
					}
				}
			})
		</script>
	</head>
	<body>
	</body>
</html>
